<template>
  <div class="main">
    <div class="content">
      <div class="left">
        <div class="header-left-top">
          <span>园区数据</span>
          <div class="header-left-content">
            <div class="item">
              <p class="label">年度累计收费(元)</p>
              <p class="value">{{ annualIncome }}</p>
            </div>
            <div class="item">
              <p class="label">入驻企业总数(个)</p>
              <p class="value">{{ enterpriseTotal }}</p>
            </div>
            <div class="item">
              <p class="label">月卡车辆总数(辆)</p>
              <p class="value">{{ monthCardTotal }}</p>
            </div>
            <div class="item">
              <p class="label">一体杆总数(台)</p>
              <p class="value">{{ chargePoleTotal }}</p>
            </div>
          </div>
        </div>
        <div class="header-left-middle">
          <p>年度收入统计</p>
          <div ref="incomeChart" class="myChart" />
        </div>
        <div class="bottom">
          <p>临期合同提醒</p>
          <el-table :header-cell-style="{ 'background-color': '#f4f6f8' }" size="mini" :data="rentInfoList">
            <el-empty v-if="rentInfoList.length=== 0" :image-size="80" description="暂无数据" />
            <el-table-column type="index" label="序号" />
            <el-table-column prop="enterpriseName" label="企业名称" />
            <el-table-column prop="buildingName" label="租赁楼宇" />
            <el-table-column label="租赁时间">
              <template #default="{row}">
                <span>{{ row.startTime }}至{{ row.endTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button v-permission="'park:rent:add_surrender'" type="text" @click="keepRent(row)">续签</el-button>
                <el-button v-permissin="'park:rent:add_surrender'" type="text" @click="cancelRent(row.id)">退租</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end">
            <el-pagination
              style="margin-top:10px"
              :current-page="params.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="params.pageSize"
              layout=" total, prev, pager, next,total,sizes"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </div>
      <div class="right">
        <div class="tool">
          <span>快捷入口</span>
          <div class="tool-items">
            <div class="tools-item" @click="$router.push('addEnterprise')">
              <img src="" alt="">
              <span>添加企业</span>
            </div>
            <div class="tools-item" @click="$router.push('/sys/user')">
              <img src="" alt="">
              <span>员工管理</span>
            </div>
            <div class="tools-item" @click="$router.push('/parking/card ')">
              <img src="" alt="">
              <span>添加月卡</span>
            </div>
            <div class="tools-item" @click="$router.push('/bigScreen')">
              <img src="" alt="">
              <span>数据大屏</span>
            </div>
          </div>
        </div>
        <div class="waring-list">
          <div class="warning-list-title">
            <span>设备告警派单</span>
          </div>
          <el-empty :image-size="80" description="暂无数据" />
          <el-button style="width:290px" type="primary" round @click="$router.push('/pole/waring')">更多 > </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getWorkbenchInfoApi, getWorkbenchRentInfoApi, cancelRentApi } from '@/api/Workbench'

export default {
  name: 'Workbench',
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      rentInfoList: [],
      annualIncome: null,
      enterpriseTotal: null,
      monthCardTotal: null,
      chargePoleTotal: null,
      annualIncomeArray: {}
    }
  },
  async created() {
    await this.getWorkbenchInfo()
    this.getRentInfoList()
    this.initIncomeChart()
  },
  methods: {
    async getRentInfoList() {
      const res = await getWorkbenchRentInfoApi(this.params)
      console.log(res)
      this.total = res.data.total
      this.rentInfoList = res.data.rows
    },
    async getWorkbenchInfo() {
      const res = await getWorkbenchInfoApi()
      this.annualIncome = res.data.annualIncome
      this.enterpriseTotal = res.data.enterpriseTotal
      this.monthCardTotal = res.data.monthCardTotal
      this.chargePoleTotal = res.data.chargePoleTotal
      this.annualIncomeArray = res.data.annualIncomeArray
      console.log(this.annualIncomeArray)
    },
    keepRent(data) {
      this.$message.info('暂未开放')
    },
    async cancelRent(id) {
      this.$confirm('退则不可撤回，是否确认退租当前楼宇?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await cancelRentApi(id)
        // 如果删除的是最后一条数据 获取列表时 应该让 page--
        if (this.rentInfoList.length === 1 && this.params.page > 1) {
          this.params.page--
        }
        this.$message({
          type: 'success',
          message: '退租成功!'
        })
        await this.getRentInfoList()
      }).catch(() => {})
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getRentInfoList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getRentInfoList()
    },
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    initIncomeChart() {
      const incomeChart = this.$refs.incomeChart
      const myChart = echarts.init(incomeChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.annualIncomeArray.xmonth
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '物业费',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.annualIncomeArray.ybuilding
          },
          {
            name: '车行收入',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.annualIncomeArray.yparking
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.uploadBtn {
  border: none;
  background-color:#edf5ff;
  color:#4770ff
}
.comfirmBtn{
  color: #fff;
  border-radius: 5px;
  margin-left: 20px;
}
.warning-list-title {
  width: 100%;
}
.waring-list {
  margin: 10px;
  padding: 20px;
  height: 300px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.tool {
  margin: 10px;
  height: 158px;
  padding: 20px;
  background-color: #fff;
}
.tools-item {
  width: 50px;
  height: 72px;
}
.tools-item:hover{
  cursor: pointer;
}
.tools-item span {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.tools-item img {
  width: 44px;
  height: 44px;
}
.tool-items {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.myChart {
  width: 800px;
  height: 350px;
}
.header-left-middle {
  padding: 10px;
}
.bottom {
  padding: 10px;
  background-color: #fff;
  margin-left: 20px;
}
.header-left-middle {
  margin: 20px 0;
  height: 382px;
  background-color: #fff;
}
.label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 12px;
}
.value {
  color: #303035;
  font-weight: 500;
  font-size: 24px;
}
.content{
  background-color: #f4f6f8;
  display: flex;
  justify-content: center;
}
.header-left-top {
  margin: 10px;
  padding: 20px;
  background-color: #fff;
}
.header-left-content {
  height: 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.header-left-content .item {
  width: 126px;
  height: 71px;
}

.main {
  /* background-color: #f4f6f8; */
  background-color: #fff;
}
.left {
  width: 865px;
  margin-right: 10px;
  background-color: #f4f6f8;
}

.right {
  width: 350px;
  background-color: #f4f6f8;
}
</style>
